<template>
  <div>
    <el-col>

      <br/>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/dashboard/MetaModelManagement/MetaModel' }">系统模型包
        </el-breadcrumb-item>
        <el-breadcrumb-item>ETL元模型</el-breadcrumb-item>
        <el-breadcrumb-item>关系表字段映射</el-breadcrumb-item>
      </el-breadcrumb>

      <br/>
      <div class="hint">
        <p>关系表字段映射模型定义了字段之间映射的关系</p>
      </div>  
      <br/>
      <br/> 

      <el-row>
        <span class="attributeList">属性列表</span>
        <Button type="success" class="add">增加</Button>
      </el-row>
      <br/>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
          fixed
          prop="attribute"
          label="属性名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="150">
        </el-table-column>
        <el-table-column
          prop="description"
          label="说明">
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    
</div>

</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          attribute: '源表名',
          type: 'String',
          description: '源关系表名称',
        }, 
        {
          attribute: '源字段',
          type: 'String',
          description: '源关系表中字段名称',
        },
        {
          attribute: '目标表名',
          type: 'String',
          description: '目标关系表名称',
        },
        {
          attribute: '目标字段',
          type: 'String',
          description: '目标源关系表中字段名称',
        }]
      }
    }
  }
</script>

<style scoped>
  .add{
    position: absolute;
    right: 0px;
  }
  .attributeList{
    font-size: 16px;
  }

  .hint{
    border-style:solid;
    border-width:1px;


  }
</style>
